import { Table, Input, Select, Divider } from "antd";
import { PaginationConfig, SorterResult } from "antd/lib/table";
import * as React from "react";
import { connect } from "react-redux";
import Modal_add from "../../form/add";
import Modal_edit from "../../form/edit";
import { columnsFun, getPaginationInfo } from "./info";
import { mapDispatchToProps, mapStateToProps, TProps } from "./interface";
import SelectOwner from "../filter/select_owner";
import SelectType from "../filter/select_type";

const Index: React.FC<TProps> = props => {
  const { getDatasource, loading, history, filter, setFilter } = props;
  const datasource = props.datasource;

  React.useEffect(() => {
    getDatasource(filter);
  }, [filter]);

  function onChange(page: PaginationConfig, sorter: SorterResult<any>) {
    const tempFilter = filter;
    tempFilter.pageNum = page.current ? page.current : tempFilter.pageNum;
    tempFilter.pageSize = page.pageSize ? page.pageSize : tempFilter.pageSize;
    if (!sorter.columnKey) {
      tempFilter.sortColumn = "";
      tempFilter.sortType = "";
    } else {
      let columnKey = sorter.columnKey;
      let order = sorter.order.replace("end", "");
      tempFilter.sortColumn = columnKey;
      tempFilter.sortType = order;
    }
    setFilter({ ...tempFilter });
    getDatasource(filter);
    console.log("sorterChange", sorter, page, filter);
  }

  return (
    <React.Fragment>
      <Modal_add />
      <Modal_edit />
      <Table
        title={() => (
          <React.Fragment>
            <SelectOwner />
            <Divider type="vertical" />
            <SelectType />
          </React.Fragment>
        )}
        loading={loading}
        columns={columnsFun()}
        dataSource={datasource.list}
        pagination={getPaginationInfo(datasource.total)}
        rowKey={(record: any) => record.id}
        // rowSelection={{
        //   // 选中的Key
        //   selectedRowKeys: filter.selectedKeys,
        //   // 当多选框发生改变时
        //   onChange: (selectedRowKeys: string[] | number[]) => {
        //     console.log("当前选中的key", selectedRowKeys);
        //     setFilter({ ...filter, selectedKeys: selectedRowKeys });
        //   }
        // }}

        onChange={(page, _filter, sorter, _extra) => onChange(page, sorter)}
      />
    </React.Fragment>
  );
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Index);
